<template>
  <div class="table">
    <div class="container">
      <div class="handle-box">
        <el-button
          type="primary"
          size="mini"
          class="handle-del mr10"
          @click="delAll"
          >批量删除</el-button
        >
        <el-input
          v-model="select_word"
          size="mini"
          placeholder="筛选相关用户"
          class="handle-input mr10"
        ></el-input>
        <el-button
          type="primary"
          size="mini"
          @click="centerDialogVisible = true"
          >添加新用户</el-button
        >
      </div>
      <el-table
        :data="data"
        border
        size="mini"
        style="width: 100%"
        ref="multipleTable"
        height="550px"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="40"
          align="center"
        ></el-table-column>
        <el-table-column label="头像" width="102" align="center">
          <template slot-scope="scope">
            <img
              :src="'http://localhost:8080/forum/upload/' + scope.row.avatar"
              alt=""
              style="width: 80px"
            />
            <el-upload
              class="upload-demo"
              action="http://localhost:8080/forum/upload/uploadavatar"
              :data="{ uId: scope.row.uId }"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <el-button size="mini">更新图片</el-button>
            </el-upload>
          </template>
        </el-table-column>
        <el-table-column
          label="编号"
          prop="uId"
          width="65"
          align="center"
        ></el-table-column>
        <el-table-column
          label="学号"
          prop="username"
          width="65"
          align="center"
        ></el-table-column>
        <el-table-column label="密码" width="80" align="center"
          >123456</el-table-column
        >
        <el-table-column
          label="昵称"
          prop="nickname"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          label="姓名"
          prop="name"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column label="性别" width="50" align="center">
          <template slot-scope="scope">
            <!-- <div>{{ changeSex(scope.row.sex) }}</div> -->
            <div>{{ scope.row.sex }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="手机号"
          prop="phone"
          width="50"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="idNumber"
          label="身份证号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="enterYear"
          label="入学年份"
          width="110"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="className"
          label="班级"
          width="80"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="subject"
          label="专业"
          width="80"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="email"
          label="邮箱"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="topicCount"
          label="发帖数量"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="commentCount"
          label="评论数量"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" width="150" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.userId)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          @current-change="handleCurrentChange"
          background
          layout="total, prev, pager, next,jumper"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="tableData.length"
        >
        </el-pagination>
      </div>
    </div>
    添加新用户
    <el-dialog
      title="添加用户"
      :visible.sync="centerDialogVisible"
      width="400px"
      center
    >
      <el-form
        :model="registerForm"
        status-icon
        :rules="rules"
        ref="registerForm"
        label-width="70px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="userName" size="mini">
          <el-input
            v-model="registerForm.username"
            placeholder="用户名"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" size="mini">
          <el-input
            type="password"
            placeholder="密码"
            v-model="registerForm.password"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别" size="mini">
          <el-radio-group v-model="registerForm.sex">
            <el-radio label="0">男</el-radio>
            <el-radio label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="昵称" prop="nickname" size="mini">
          <el-input
            placeholder="昵称"
            v-model="registerForm.nickname"
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name" size="mini">
          <el-input placeholder="姓名" v-model="registerForm.name"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone" size="mini">
          <el-input
            placeholder="手机号"
            v-model="registerForm.phone"
          ></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="idNumber" size="mini">
          <el-input
            placeholder="身份证号"
            v-model="registerForm.idNumber"
          ></el-input>
        </el-form-item>

        <el-form-item label="入学年份">
          <el-select
            v-model="registerForm.enterYear"
            placeholder="入学年份"
            size="mini"
          >
            <el-option label="2019" value="2019"></el-option>
            <el-option label="2020" value="2020"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="专业">
          <el-select
            @change="changeSubject"
            v-model="registerForm.subject"
            placeholder="专业"
            size="mini"
          >
            <el-option
              v-for="item in subjects"
              :key="item.value"
              :label="item.label"
              :value="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班级">
          <el-select
            v-model="registerForm.className"
            placeholder="班级"
            no-data-text="请先选择专业"
            size="mini"
          >
            <el-option
              v-for="item in classes"
              :key="item.value"
              :label="item.label"
              :value="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="邮箱" prop="email" size="mini">
          <el-input placeholder="邮箱" v-model="registerForm.email"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="centerDialogVisible = false"
          >取 消</el-button
        >
        <el-button type="primary" size="mini" @click="addUser">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 删除提示框 -->
    <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
      <div class="del-dialog-cnt" align="center">
        删除不可恢复，是否确定删除？
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="delVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="deleteRow"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mixin } from "../mixins";
//import { setUser, updateUserMsg, getAllUser, deleteUser } from '../api/index'
import axios from "axios";

export default {
  name: "consumer-page",
  mixins: [mixin],
  data() {
    return {
      subjects: [
        { label: "软件工程", value: "software" },
        { label: "网络工程", value: "internet" },
      ],
      classes1: [
        { label: "软件201", value: "rj21" },
        { label: "软件202", value: "rj22" },
        { label: "软件203", value: "rj23" },
        { label: "软件204", value: "rj24" },
      ],
      classes2: [
        { label: "网络201", value: "wl21" },
        { label: "网络202", value: "wl22" },
      ],
      classes: [],

      index: 0,
      //imageUrl: "",
      registerForm: {
        // 注册
        uId: "",
        username: "",
        password: "123456",
        nickname: "",
        name: "",
        sex: "",
        avatar: "",
        phone: "",
        idNumber: "",
        enterYear: "",
        className: "",
        subject: "",
        email: "",
        topicCount: "",
        commentCount: "",
      },

      rules: {
        username: [{ required: true, trigger: "blur" }],
        password: [{ required: true, trigger: "blur" }],
      },
      tableData: [], // 记录用户信息，用于显示
      tempData: [], // 记录用户信息，用于搜索时能临时记录一份用户信息
      is_search: false,
      multipleSelection: [], // 记录要删除的用户信息
      centerDialogVisible: false,
      editVisible: false, // 显示编辑框
      delVisible: false, // 显示删除框
      select_word: "", // 记录输入框输入的内容
      form: {
        // 记录编辑的信息
        uId: "",
        username: "",
        password: "123456",
        nickname: "",
        name: "",
        sex: "",
        avatar: "",
        phone: "",
        idNumber: "",
        enterYear: "",
        className: "",
        subject: "",
        email: "",
        topicCount: "",
        commentCount: "",
      },
      pageSize: 5, // 页数
      currentPage: 1, // 当前页
      userIdx: -1, // 记录当前点中的行
    };
  },
  computed: {
    // 计算当前表格中的数据
    data() {
      return this.tableData.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
  },
  watch: {
    select_word: function () {
      if (this.select_word === "") {
        this.tableData = this.tempData;
      } else {
        this.tableData = [];
        for (let item of this.tempData) {
          if (
            item.username.includes(this.select_word) ||
            item.nickname.includes(this.select_word)
          ) {
            this.tableData.push(item);
          }
        }
      }
    },
  },
  created() {
    this.getData();
  },

  methods: {
    // 获取当前页
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    uploadUrl(id) {
      return `/api/upload?id=${id}`;
      //return `${this.$store.state.HOST}/user/avatar/update?id=${id}`
    },
    changeSubject() {
      if (this.registerForm.subject == this.subjects[0].label) {
        this.classes = this.classes1;
      } else if (this.registerForm.subject == this.subjects[1].label) {
        this.classes = this.classes2;
      }
    },
    // 获取用户信息
    getData() {
      this.tableData = [];
      this.tempData = [];
      let _this = this;
      $.ajax({
        type: "get",
        url: "http://localhost:8080/forum/admin/userlist",
        dataType: "json",
        success: function (response) {
          // console.log("nicelist", response);
          _this.tableData = response;
          _this.tempData = response;
        },
      });
    },
    // 添加用户
    addUser() {
      // let datetime =
      //   d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();
      let username = this.registerForm.username;
      let password = this.registerForm.password;
      let nickname = this.registerForm.nickname;
      let name = this.registerForm.name;
      let sex = this.registerForm.sex;
      let avatar = "no-avatar.png";
      let phone = this.registerForm.phone;
      let idNumber = this.registerForm.idNumber;
      let enterYear = this.registerForm.enterYear;
      let className = this.registerForm.className;
      let subject = this.registerForm.subject;
      let email = this.registerForm.email;
      let _this = this;
      $.ajax({
        type: "post",
        data: {
          username,
          password,
          nickname,
          name,
          sex,
          avatar,
          phone,
          idNumber,
          enterYear,
          className,
          subject,
          email,
        },
        url: "http://localhost:8080/forum/admin/adduser",
        dataType: "json",
        success: function (response) {
          console.log(response);
          // console.log("nicelist", response);
          if (response === 200) {
            _this.$message({
              message: "添加成功",
              type: "success",
              duration: 1000,
            });
            _this.getData();
          }
        },
      });
      this.centerDialogVisible = false;
    },
    //   // 编辑
    //   handleEdit(row) {
    //     this.userIdx = row.userId;
    //     this.form = {
    //       userId: row.userId,
    //       username: row.username,
    //       password: row.password,
    //       nickname: row.nickname,
    //       sex: row.sex,
    //       age: row.age,
    //       address: row.address,
    //       HangYe: row.HangYe,
    //       German: row.German,
    //       individual: row.individual,
    //       Jshao: row.Jshao,
    //       archan: row.archan,
    //     };
    //     this.editVisible = true;
    //   },
    //   // 保存编辑
    //   saveEdit() {
    //     let params = new URLSearchParams();
    //     //let params = [];
    //     params.append("userId", this.form.userId);
    //     params.append("username", this.form.username);
    //     params.append("password", this.form.password);
    //     params.append("nickname", this.form.nickname);
    //     params.append("sex", this.form.sex);
    //     params.append("age", this.form.age);
    //     params.append("address", this.form.address);
    //     params.append("HangYe", this.form.HangYe);
    //     params.append("German", this.form.German);
    //     params.append("individual", this.form.individual);
    //     params.append("Jshao", this.form.Jshao);
    //     axios
    //       .post("api/updateUserMsg", params)
    //       //updateUserMsg(params)
    //       .then((res) => {
    //         console.log(res);
    //         if (res.data.code === 1) {
    //           this.getData();
    //           this.notify("修改成功", "success");
    //         } else {
    //           this.notify("修改失败", "error");
    //         }
    //       })
    //       .catch((err) => {
    //         console.log(err);
    //       });
    //     this.editVisible = false;
    //   },
    //   // 确定删除
    //   deleteRow() {
    //     let id = this.userIdx;
    //     console.log(id);
    //     let params = { id };
    //     axios
    //       .post("api/deleteUser", params)
    //       //deleteUser(this.idx)
    //       .then((res) => {
    //         if (res) {
    //           this.getData();
    //           this.notify("删除成功", "success");
    //         } else {
    //           this.notify("删除失败", "error");
    //         }
    //       })
    //       .catch((failResponse) => {});
    //     this.delVisible = false;
    //   },
  },
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
  font-size: 12px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.pagination {
  display: flex;
  justify-content: center;
}
</style>
